<script setup>
import Layout from '../Layout/index.vue'
import { routerList } from './components/data.js'

const router = useRouter()
const route = useRoute()
const activeNav = ref(1);


const handleClick = (item) => {
    activeNav.value = item.id;
    router.push(item.path);
}
onMounted(() => {
    let item;
    if(route.path === '/styles'){
        item = routerList[0];
        router.push(item.path);
    }else{
        item = routerList.find(item => item.path === route.path);
    }
    activeNav.value = item.id;
    
})

const exit = () => {
    router.push({path:"/home"})
}
</script>

<template>
    <Layout>
        <template #header>
          <h1 class="w-full h-40px lh-40px bg-#f0f0f0 text-24px font-bold pl-20px box-border">动画样式</h1>
        </template> 
        <template #sidebar>
          <div class="flex flex-col h-full">
              <ul class="w-full h-full flex flex-col">
                <li :class="['h-40px lh-40px text-center cursor-pointer shadow-[0px_1px_1px_#ccc] hover:bg-#ccc', {'bg-#ccc': activeNav === item.id}]"
                    v-for="item in routerList" :key="item.id" @click="handleClick(item)">{{ item.title }}</li>
              </ul>
            <button class="mt-10px h-40px lh-40px text-center cursor-pointer bg-#ccc" @click="exit">退出</button>
          </div>
        </template>
        <template #main>
            <router-view></router-view>
        </template>
    </Layout>
</template>

<style lang="scss" scoped>
</style>
